<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#"
  xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

<meta charset="utf-8" />
<title>Santorini Water Fantasy</title>

<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id = "home-schedule">
	<div class = "head-bar">

		<a href = "home-schedule.html?date={$prev}"><img src="images/btn-prev-month.jpg" class = "btn-next-month"></a>
		<a href = "home-schedule.html?date={$next}"><img src="images/btn-next-month.jpg" class = "btn-next-month"></a>
		<a href = "home-schedule.html?date={$today}"><img src="images/btn-today.jpg" class = "btn-next-month" style = "margin-left:20px;"></a>

		<h2>{$month}</h2>
	</div>

	<div class = "month-view">
		<div class = "box head">{$e['sun']}</div>
		<div class = "box head">{$e['mon']}</div>
		<div class = "box head">{$e['tue']}</div>
		<div class = "box head">{$e['wed']}</div>
		<div class = "box head">{$e['thu']}</div>
		<div class = "box head">{$e['fri']}</div>
		<div class = "box head">{$e['sat']}</div>

		{loop="all_box"}
			<div class = "box {$value.class} {if="$value.date == $today"} today {/if}">
				<span class = "date">{$value.d}</span>
				{if="$value.have == 1"}
					{loop="all_date[$value.date]"}
						<a href = "#" class = "ajax"><span class = "event {$value2.line}">{$value.topic}</span></a>
					{/loop}
				{/if}
			</div>
		{/loop}
		<div class = "clear"></div>
	</div>
</div>

<script>
$(document).ready(function(){

$(".ajax").click(function(){
	window.parent.$.fancybox('<img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg">');
});
	/*
	$(".ajax").fancybox({
		'width'				: '75%',
		'height'			: '75%',
        'autoScale'     	: false,
        'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'type'				: 'iframe',
	});
	*/
});
</script>

</body>
</html>